<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title></title>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/flexible2.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

    <button id="x1">选择车上</button>
    <div class="page-carseller-search" id="J_page-carseller-search">
        <div class="sec-seach-wrap">
            <div class="sec-search">
                <form action="#">
                <i class="iconfont icon-sousuo"></i>
                <input type="search" class="ipt-search" placeholder="选择二手车商" />
               <!--  <input type="submit" class="ipt-submit" /> -->
               </form>
            </div>
            <a href="#" class="cancel-btn">取消</a>
        </div>
        <div id="search-wrapper" class="search-wrapper">
            <div id="search-scroller" class="search-scroll">
                <ul class="search-list">
                    <li><a href="#">中晟诚品二手车</a></li>
                    <li><a href="#">盈众易新二手车</a></li>
                    <li><a href="#">中晟诚品二手车</a></li>
                    <li><a href="#">盈众易新二手车</a></li>
                    <li><a href="#">中晟诚品二手车</a></li>
                    <li><a href="#">盈众易新二手车</a></li>
                    <li><a href="#">中晟诚品二手车</a></li>
                    <li><a href="#">盈众易新二手车</a></li>
                    <li><a href="#">中晟诚品二手车</a></li>
                    <li><a href="#">盈众易新二手车</a></li>
                    <li><a href="#">中晟诚品二手车</a></li>
                    <li><a href="#">盈众易新二手车</a></li>
                    <li><a href="#">中晟诚品二手车</a></li>
                    <li><a href="#">盈众易新二手车</a></li>
                    <li><a href="#">中晟诚品二手车</a></li>
                    <li><a href="#">盈众易新二手车</a></li>
                    <li><a href="#">中晟诚品二手车</a></li>
                    <li><a href="#">盈众易新二手车</a></li>
                </ul>
            </div>
        </div>
		

    </div>

    <script type="text/javascript" src="js/mDialog.js"></script>
    <script type="text/javascript" src="js/iscroll/iscroll.js"></script>
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <script type="text/javascript">
        $(function(){
            var carSellerDialog,carSellerIscroll;
            $("#x1").on("click",function(){
               carSellerDialog=mDialog.open({
                    title: false,
                    closeBtn: false,
                    width: "100%",
                    height: "100%",
                    maxWidth: "100%",
                    maxHeight: "100%",
                    duration: 300,
                    animIn: "slideInRight",
                    animOut: "slideOutRight",
                    content: $("#J_page-carseller-search"),
                    onBeforeShow: function() {
                        if(!carSellerIscroll){
                            carSellerIscroll= new IScroll('#search-wrapper',{
                                 click: true
                            })
                        }
                        
                    },
                    onShow: function() {
                       
                    },
                    onBeforeClose: function() {},
                    onClose: function() {}
                });
            })
            $("#J_page-carseller-search").find(".cancel-btn").on("click",function(){
                carSellerDialog.close();
            })

            $(".search-list").on("click","li",function(){
                alert("xxxxx");
            })
        })
    </script>
</body>

</html>